<template>
  <div>
    <router-view></router-view>
    <My />
    <button @click="click" class="xxxxx" style="color: red">helloWorld</button>
    <AppLink />
    <div style="margin-top: 50px">
      <span style="width: 400px; height: 50px; display: inline-block">{{
        value
      }}</span>
      <div style="display: inline-block; width: 400px">
        <div class="ccc">
          <IIInput placeholder="登录名" v-model="value"></IIInput>
        </div>
        <div class="ccc">
          <IIInput placeholder="密码" v-model="value"></IIInput>
        </div>
        <div class="ccc">
          <IIInput placeholder="验证码" v-model="value2"></IIInput>
        </div>
      </div>
    </div>
    <div style="margin-top: 50px">
      <span style="width: 400px; height: 50px; display: inline-block">{{
        value
      }}</span>
      <div style="display: inline-block; width: 400px">
        <div class="ccc">
          <IIInput
            labelPosition="top"
            placeholder="登录名"
            v-model="val1"
          ></IIInput>
        </div>
        <div class="ccc">
          <IIInput
            labelPosition="top"
            placeholder="密码"
            v-model="val2"
          ></IIInput>
        </div>
        <div class="ccc">
          <IIInput
            labelPosition="top"
            placeholder="验证码"
            v-model="val3"
          ></IIInput>
        </div>
      </div>
      <div style="display: inline-block; width: 400px">
        <div class="ccc">
          <InputTS
            labelPosition="top"
            placeholder="登录名TS"
            v-model="val1m"
          ></InputTS>
        </div>
        <div class="ccc">
          <InputTS
            labelPosition="top"
            placeholder="密码TS"
            v-model="val2m"
          ></InputTS>
        </div>
        <div class="ccc">
          <InputTS
            labelPosition="top"
            placeholder="验证码TS"
            v-model="val3m"
          ></InputTS>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import My from "./components/my";
import AppLink from "./components/AppLink";
import IIInput from "./components/setupEx";
import InputTS from "./components/InputTS.vue";
import Schema from "async-validator";
let validator = null;

export default {
  name: "App",
  data() {
    return {
      //将vm.$options.data存储在变量data中，同时vm新建私有属性_data映射该对象，这样就可以通过vm._data访问到data数据
      value: "",
      val1: "",
      val2: "",
      val3: "",
      val1m: "",
      val2m: "",
      val3m: "",
      rules: {
        val1: [{ required: true, message: "姓名为必填项" }],
        val2: [],
        val3: [
          {
            validator(rule, value, callback) {
              value == this.val2
                ? callback(new Error("未成年人不符合条件"))
                : callback();
            },
          },
        ],
        val4: [{ required: true, message: "姓名为必填项" }],
      },
      message: {},
    };
  },
  components: {
    My,
    AppLink,
    IIInput,
    InputTS
  },
  created() {
    validator = new Schema(this.rules);
  },
  mounted() {
    console.log("My：", My);
    console.log("vue", this);
    console.log("getRoutes:", this.$router.getRoutes());
    // console.log('data',this._data.value);
  },
  methods: {
    click() {
      validator
        .validate(
          { val1: this.val1, val2: this.val2, val3: this.val3 },
          { firstFields: true }
        )
        .then(() => {
          console.log("sssss");
        })
        .catch(({ errors }) => {
          for (let { field, message } of errors) {
            this.message[field] = message;
            console.log(message, field);
          }
        });
    },
  },
};
</script>

<style>
.xxxxx {
  background-color: bisque;
  display: inline-block;
}
.ccc {
  margin-top: 39px;
}
</style>
